<template>
  <div class="table-container">
    <el-table :data="tableData" :height="tableHeight" :row-class-name="lockedRowClass" border size="small"
              @row-click="handleClick">
      <el-table-column align="center" label="枪号" prop="gunNo" width="50px"></el-table-column>
      <el-table-column align="center" label="油品" prop="fuelName"></el-table-column>
      <el-table-column align="center" label="升数" prop="litre"></el-table-column>
      <el-table-column align="center" label="金额" prop="amount"></el-table-column>
      <el-table-column :formatter="timeSimplify" align="center" label="时间" prop="endTime"></el-table-column>
    </el-table>
    <div class="pager">
      <el-pagination :current-page="currentPage" :page-size="pageSize" :total="toSettleList.length"
                     layout="total, prev, pager, next" @prev-click="handlePrevClick" @next-click="handleNextClick"
                     @current-change="handleCurrentChange"></el-pagination>
    </div>
  </div>
</template>
<script>
import {mapGetters} from 'vuex'
import moment from 'moment'
import {forceUnlockFuelRecord, lockFuelRecord} from '@/api/settle'

export default {
  name: 'ToSettleRecord',
  data () {
    return {
      currentPage: 1
    }
  },
  computed: {
    tableData () {
      if (this.currentPage * this.pageSize > this.toSettleList.length) {
        return this.toSettleList.slice(this.pageSize * (this.currentPage - 1), this.toSettleList.length)
      } else {
        return this.toSettleList.slice(this.pageSize * (this.currentPage - 1), this.pageSize * this.currentPage)
      }
    },
    ...mapGetters([
      'contentHeight',
      'toSettleList',
      'stationId',
      'operator',
      'pageSize'
    ]),
    tableHeight () {
      return (this.contentHeight - 285) + 'px'
    }
  },
  mounted () {
  },
  methods: {
    timeSimplify (row, column) {
      return row.endTime ? moment(row.endTime).format('HH:mm:ss') : ''
    },
    lockedRowClass ({row, rowIndex}) {
      return row.locked ? 'locked' : ''
    },
    handleClick (row, column, event) {
      console.log('handleClick')
      console.log(row)
      lockFuelRecord({id: row.id, stationId: this.stationId, operator: this.operator}).then(res => {
        console.log(res)
        this.$store.dispatch('showCartDialog')
        this.$store.dispatch('addToCartList', row)
      }).catch(err => {
        console.log(err)
        this.$message.warning('该笔记录正在结算中！')
        this.$confirm('该笔记录正在结算中，是否解锁该记录? 强制解锁可能会导致顾客支付失败，请谨慎使用！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          forceUnlockFuelRecord({id: row.id, stationId: this.stationId, operator: this.operator}).then(res => {
            this.$message({
              type: 'success',
              message: '解锁成功!'
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消解锁'
          })
        })
      })
    },
    handlePrevClick (page) {
      this.currentPage = page
    },
    handleNextClick (page) {
      this.currentPage = page
    },
    handleCurrentChange (page) {
      this.currentPage = page
    }
  }
}
</script>
<style scoped>
.table-container {
  width: 100%;
  height: 100%;
}

.pager {
  text-align: center;
  padding: 5px;
  background: white;
}
</style>
<style>
.el-table .locked {
  background: #E6A23C;
  color: white;
}
</style>